<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>shidaiclient</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="/static/lib/css/mui.min.css">

    <link rel="stylesheet" type="text/css" href="/static/components/css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/static/components/css/welfare.css"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="{{ url_for('home.index') }}"></a>
    <h1 class="mui-title" style="font-size:0.3rem ;color: #333333;font-weight: normal;">游戏福利</h1>
</header>

<div class="mui-content">
    <div>
				<span class="iconfont icon-icon btn_allwelfare">
					全部礼包	
				</span>
        <span class="iconfont icon-msnui-gift-bold btn_mywelfare">
					我的礼包
				</span>
    </div>
    <div class="welfare_cut_off_line"></div>

    <div id="wrapper">
        <div id="scroller">
            <div id="pullDown">
                <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
            </div>
            <div id="welfare_content">
                <div id="all_welfare">

                    <div class="allwelfare_title">
                        全部礼包
                    </div>
                    <ul class="mui-table-view welfare_ul">
                        <!--<li class="mui-table-view-cell mui-media">
                            <span class="mui-pull-right iconfont icon-you" style=""></span>
                            <a href="javascript:;">
                                <img class="mui-media-object mui-pull-left" src="../static/components/img/welfare/welfare_wzry_icon_01.png">
                                <div class="mui-media-body main_title">
                                    王者荣耀-<span class="welfare_column_title_tail">三天成霸业</span>
                                </div>
                                <div class="allwelfare_content">
                                    <div>
                                        下载福利：金币888、铭纹碎片20…
                                    </div>
                                    <div>
                                        评论福利：金币88、钻石15…
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                            <span class="mui-pull-right iconfont icon-you" style=""></span>
                            <a href="javascript:;">
                                <img class="mui-media-object mui-pull-left" src="../static/components/img/welfare/welfare_wzry_icon_01.png">
                                <div class="mui-media-body main_title">
                                    王者荣耀-<span class="welfare_column_title_tail">三天成霸业</span>
                                </div>
                                <div class="allwelfare_content">
                                    <div>
                                        下载福利：金币888、铭纹碎片20…
                                    </div>
                                    <div>
                                        评论福利：金币88、钻石15…
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                            <span class="mui-pull-right iconfont icon-you" style=""></span>
                            <a href="javascript:;">
                                <img class="mui-media-object mui-pull-left" src="../static/components/img/welfare/welfare_wzry_icon_01.png">
                                <div class="mui-media-body main_title">
                                    王者荣耀-<span class="welfare_column_title_tail">三天成霸业</span>
                                </div>
                                <div class="allwelfare_content">
                                    <div>
                                        下载福利：金币888、铭纹碎片20…
                                    </div>
                                    <div>
                                        评论福利：金币88、钻石15…
                                    </div>
                                </div>
                            </a>
                        </li>
                        -->
                    </ul>
                    <div id="all_welfare_no_content" style="display: none;">暂时没有内容</div>
                </div>

                <div id="my_welfare" style="display: none;">
                    <div class="allwelfare_title">
                        我的礼包
                    </div>
                    <ul class="mui-table-view welfare_ul">
                        <!--<li class="mui-table-view-cell mui-media">
                            <div class="xxx">
                                <img class="mui-media-object mui-pull-left" src="../static/components/img/welfare/welfare_wzry_icon_01.png">
                                <div class="mui-media-body main_title">
                                    王者荣耀-<span class="welfare_column_title_tail">三天成霸业</span>
                                </div>
                                <div class="mywelfare_content">
                                    兑换码：asfhgj746FGHBSE5E7
                                    <span class="mywelfare_content_copy">
                                        复制
                                    </span>
                                </div>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                            <div class="xxx">
                                <img class="mui-media-object mui-pull-left" src="../static/components/img/welfare/welfare_wzry_icon_01.png">
                                <div class="mui-media-body main_title">
                                    王者荣耀-<span class="welfare_column_title_tail">三天成霸业</span>
                                </div>
                                <div class="mywelfare_content">
                                    兑换码：asfhgj746FGHBSE5E7
                                    <span class="mywelfare_content_copy">
                                        复制
                                    </span>
                                </div>
                            </div>
                        </li>-->
                    </ul>
                    <div id="my_welfare_no_content" style="display: none;">暂时没有内容</div>
                </div>


            </div>
        </div>
    </div>
</div>
<!-- build:js /static/js/welfare.min.js -->
<script src="/static/lib/js/mui.min.js"></script>
<script src="/static/components/js/util.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/static/lib/js/jquery.js"></script>
<!-- endbuild -->
<script src="/static/components/js/ag.js" type="text/javascript"></script>

<script type="text/javascript">
    window.onload = function () {
        var base_url = '{{ g.api_url }}';
        var channel_code = '{{ g.channel_code }}';

        loadingAnalyze('{{ g.analyze_url }}');
        //获取游戏福利数据
        request(base_url + '/game/member/gift', {
            "type": "map",
            "content": {
                "page": "1",
                "per_page": "100",
                "token": localStorage.getItem('token')
            }
        })
                .done(function (data) {
                    dealAllWelfare(data);
                })
                .fail(function () {
                    console.log('dealAllWelfare error');
                    showAllWelfareBlankArea();
                });

        //获取用户福利数据
        request(base_url + '/game/member/gift/order', {
            "type": "map",
            "content": {
                "page": "1",
                "per_page": "100",
                "token": localStorage.getItem('token')
            }
        })
                .done(function (data) {
                    dealUserWelfare(data);
                })
                .fail(function () {
                    console.log('dealUserWelfare error');
                    showMyWelfareBlankArea();
                });

    }


    function dealUserWelfare(json) {
				var tmp = '';
				var ul = document.getElementsByClassName('welfare_ul');
				for(var mynum = 0; mynum < json.items.length; mynum++) {
					if(json.items[mynum].status != 8) {
						continue;
					}
					var secTitle = isNull(json.items[mynum].activity.game.game_title) == "" ? "" : "-" + json.items[mynum].activity.game.game_title;
					tmp += '<li class="mui-table-view-cell mui-media"><div class="xxx"><img class="mui-media-object mui-pull-left" src="' +
						json.items[mynum].activity.game.icon + //icon
						'"><div class="mui-media-body main_title">' +
						json.items[mynum].activity.game.game_name + //主标题
						'<span class="welfare_column_title_tail">' +
						secTitle + //副标题
						'</span></div><div class="mywelfare_content">兑换码：<span id="redeem_code">' +
						json.items[mynum].git_detail.redemption_code　 + //兑换码
						'</span><span class="mywelfare_content_copy">复制</span></div></div></li>';
				}

				if(tmp == "") {
					showMyWelfareBlankArea();
					return;
				}
        ul[1].innerHTML = tmp;

        mui('.mywelfare_content').on('tap', '.mywelfare_content_copy', function () {
            alert(this.parentNode.getElementsByTagName('span')[0].innerText);
        })
    }

			function showAllWelfareBlankArea() {
				var all_welfare_no_content = document.getElementById('all_welfare_no_content');
				all_welfare_no_content.style.display = 'block';
			}

			function showMyWelfareBlankArea() {
				var my_welfare_no_content = document.getElementById('my_welfare_no_content');
				my_welfare_no_content.style.display = 'block';
			}

    function dealAllWelfare(json) {
        if (json.items.length == 0) {
            showAllWelfareBlankArea();
            return;
        }

        var ul = document.getElementsByClassName('welfare_ul');
        for (var allwelfarenum = 0; allwelfarenum < json.items.length; allwelfarenum++) {
            var li = document.createElement('li');
            li.className = 'mui-table-view-cell mui-media';

            var tmpcontent = '';
            for (var allwelfarecontentnum = 0; allwelfarecontentnum < json.items[allwelfarenum].gift_activity.length; allwelfarecontentnum++) {
                var div = document.createElement('div');
                div.className = 'mui-ellipsis';
                div.innerText = json.items[allwelfarenum].gift_activity[allwelfarecontentnum].activity_name + ":" +
                        json.items[allwelfarenum].gift_activity[allwelfarecontentnum].gift_content;
                tmpcontent += div.outerHTML;
            }
            var secTitle = isNull(json.items[allwelfarenum].game_title) == "" ? "" : "-" + json.items[allwelfarenum].game_title;
            var tmp = '<span class="mui-pull-right iconfont icon-you" style=""></span><div id="' +
                    json.items[allwelfarenum].id + //id
                    '" class="allwelfare_div"><img class="mui-media-object mui-pull-left" src="' +
                    json.items[allwelfarenum].icon + //icon
                    '"><div class="mui-media-body main_title">' +
                    json.items[allwelfarenum].game_name + //主标题
                    '<span class="welfare_column_title_tail">' +
                    secTitle + //副标题
                    '</span></div><div class="allwelfare_content">' +
                    tmpcontent + //福利内容
                    '</div></div>';
            li.innerHTML = tmp;
            ul[0].appendChild(li);
        }

        //点击全部礼包时跳转
        mui('.mui-table-view-cell').on('tap', '.allwelfare_div', function () {
            window.name = this.id;
            window.location.href = '{{ url_for('home.game_welfare_detail', game_id='') }}' + this.id;
            return false;
        })


    }
</script>

<script type="text/javascript">
    //切换全部礼包和我的礼包
    var all_welfare = document.getElementById('all_welfare');
    var my_welfare = document.getElementById('my_welfare');

    var btn_allwelfare = document.getElementsByClassName('btn_allwelfare');
    btn_allwelfare[0].addEventListener('click', function () {
        all_welfare.style.display = 'block';
        my_welfare.style.display = 'none';
    })
    var btn_mywelfare = document.getElementsByClassName('btn_mywelfare');
    btn_mywelfare[0].addEventListener('click', function () {
        all_welfare.style.display = 'none';
        my_welfare.style.display = 'block';
    })

    mui('.mui-bar').on('tap', '.mui-pull-left', function () {
        alert(this.parentNode.getElementsByTagName('span')[0].innerText);
        return false;
    })
</script>

<script type="text/javascript" src="/static/components/js/iscroll.js"></script>
<script type="text/javascript">
    var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;

    function pullDownAction() {
        var my_welfare = document.getElementById('my_welfare');
        if (my_welfare.style.display == 'block') {
            //我的礼包下拉刷新
            var ul = document.getElementsByClassName('welfare_ul');
            ul[1].innerHTML = '';
            //获取我的礼包数据
            request(base_url + '/game/member/gift/order', {
                "type": "map",
                "content": {
                    "page": "1",
                    "per_page": "100",
                    "token": localStorage.getItem('token')
                }
            })
                    .done(function (data) {
                        console.log('我的礼包刷新成功');
                        dealUserWelfare(data);
                        showOk();
                    })
                    .fail(function () {
                        console.log('dealAllWelfare error');
                        showMyWelfareBlankArea();
                        showOk();
                    });
            return;
        }

        //全部礼包下拉刷新
        var ul = document.getElementsByClassName('welfare_ul');
        ul[0].innerHTML = '';
        //获取游戏福利数据
        request(base_url + '/game/member/gift', {
            "type": "map",
            "content": {
                "page": "1",
                "per_page": "100",
                "token": localStorage.getItem('token')
            }
        })
                .done(function (data) {
                    console.log('游戏福利刷新成功');
                    dealAllWelfare(data);
                    showOk();
                })
                .fail(function () {
                    console.log('dealAllWelfare error');
                    showAllWelfareBlankArea();
                    showOk();
                });
    }
    function showOk() {
        //刷新成功处理
        if (pullDownEl.className.match('loading')) {
            pullDownEl.className = '';
            pullDownEl.querySelector('.pullDownLabel').innerHTML = '刷新成功';
        }
        setTimeout(function () {
            myScroll.refresh();
        }, 500);
    }
    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;

        myScroll = new iScroll('wrapper', {
            useTransition: true,
            topOffset: pullDownOffset,
            onRefresh: function () {

            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                    this.minScrollY = -pullDownOffset;
                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
                    pullDownAction(); // Execute custom function (ajax call?)
                }
            }
        });

        setTimeout(function () {
            document.getElementById('wrapper').style.left = '0';
        }, 800);
    }

    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);

    document.addEventListener('DOMContentLoaded', function () {
        setTimeout(loaded, 50);
    }, false);
</script>

</body>

</html>